<template>
  <div class="diy_edit ad_edits" id="ad_edit">
    <el-form
      :model="form"
      ref="ruleFormRef"
      :rules="rules"
      label-width="auto"
      class="edit_ad_form"
      size="large"
    >
      <el-row class="row_e">
        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题"></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="链接" prop="url">
            <el-input v-model="form.url" placeholder="请输入链接"></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="投放位置" prop="location">
            <el-select v-model="form.location" placeholder="请选择">
              <el-option value="顶部广告">顶部广告</el-option>
              <el-option value="中部广告">中部广告</el-option>
              <el-option value="底部广告">底部广告</el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="editor el_form_editor_warp">
          <el-form-item label="内容" prop="content">
            <form_editor
              class="editor el_form_editor_warp"
              :form="form"
              @blur_comment="blur_comment"
              @update_comment="update_comment"
              :publish_flag="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="footer">
        <el-button type="primary" @click="Onsubmit" size="large"
          >提交</el-button
        >
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { $post, $get } from "@/api/Api.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { $getUrlParams,} from "@/utils/utils.js";
let router = useRouter();
let ad_id = $getUrlParams().ad_id;
let url_set = ref("/api/ad/set");
let url_add = ref("/api/ad/add");
let url_get_obj = ref("/api/ad/get_obj");

let form = ref({
    ad_id: 0,
    title: "",
    content: "",
    url: "",
    img: "",
    display: 0,
    hits: 0,
    location: ""
});

let ruleFormRef = ref(null);
let rules = ref({
    title: [
    {
      required: true,
      message: "标题不能为空",
      trigger: "blur",
    }
  ],
  content: [
    {
      required: true,
      message: "文本不能为空",
      trigger: "blur",
    }
    ],
    url: [
        {
        required: true,
        message: "连接不能为空",
        trigger: "blur",
        }
    ],
    location: [
        {
        required: true,
        message: "投放位置不能为空",
        trigger: "blur",
        }
    ]
});
// 富文本编辑器更新
let update_comment = (obj) => {
  form.value.content = obj;
};
let blur_comment = (obj) => {
  form.value.content = obj;
};
// 点击取消
let cancel = () => {
  router.go(-1);
};
// 点击提交
let Onsubmit = async () => {
  let valid = await ruleFormRef.value.validate();
  if (valid) {
    if(ad_id){
        // 编辑
        delete form.value.update_time;
        $post(url_set.value+"?ad_id=" + ad_id, form.value).then((res) => {
            if (res.result) {
            ruleFormRef.value.resetFields();
            router.push("/home/ad/table");
            ElMessage.success("提交成功！");
            } else if (res.error) {
            ElMessage.error(res.error.message);
            }
        });
	 
    }else{
        // 新增
        $post(url_add.value, form.value).then((res) => {
            if (res.result) {
            ruleFormRef.value.resetFields();
            router.push("/home/ad/table");
            ElMessage.success("提交成功！");
            } else if (res.error) {
            ElMessage.error(res.error.message);
            }
        });

    }
  } else {
    ElMessage.error(msg);
  }
};
// 获取详情
let get_ad_obj = async () => {
  var list = await $get(url_get_obj.value+"?ad_id=" + ad_id);
  form.value = list.result.obj;
};
onMounted(() => {
  if(ad_id){
    get_ad_obj();
  }
 
});
</script>

<style scoped lang="less">
.diy_edit {
  width: 100%;
  .edit_ad_form {
    max-width: 60%;
    margin: 90px auto;
    .fn {
      width: 100%;
    }
  }
  img {
    width: 100px;
    height: 100px;
  }
  .edit_list_ad_sell {
    width: 80%;
    margin: 90px auto;
  }
  .footer {
    text-align: center;
  }
}
</style>
